<template>
    <div class="recruit-page">
        <div class="top">
            <router-link class="left-back" to="/"></router-link>
            <router-link class="my-publish" to="/myRecruit">我的发布</router-link>
        </div>
        <div class="recruit-page-conbox">
            <div class="filter">
                <div class="search-bx">
                    <form
                    @submit.prevent="
                        () => {
                        return false
                        }
                    "
                    >
                    <input type="text" @keypress.enter="handleSearch" v-model="params.title" placeholder="搜索职位" />
                    <a class="cancel-search" v-if="params.title" @click="params.title=''"></a>
                    </form>
                </div>
                <div class="other">
                     <el-cascader 
                            v-model="selectedOptionsFilter"
                            clearable style="width:160px;"
                            placeholder="工作地点" class="pro-work-elcascader"
                            :options="options"
                            @change="handleChangeFilter" popper-class="pro-wlrk-elcascader-proper"
                            ></el-cascader>
                    <DropDown :list="jobNatureList" :value.sync="params.jobNature" :width="160" placeholder="工作性质" style="margin-left:20px;"/>
                    <DropDown :list="jobSalaryList" :value.sync="params.salary" :width="160" placeholder="月薪范围" style="margin-left:20px;"/>
                </div>
            </div>
            <div class="job-tit">
                最新职位<span class="cur-company" v-if="params.companyName">{{params.companyName}}<i class="cancel-search" @click="clearCurCompanyBy"></i></span>
            </div>
            <div class="layout-box">
                <div class="left">
                    <a class="job-item" v-for="(job,i) in list" :key="i" @click="handleShowInfo(job)" :class="{'no-data':!job.id}">
                        <template v-if="job.id">
                            <div class="job-l">
                                <span class="j-img-box">
                                    <img loading="lazy" v-aimgd="{avatar:job.member.avatar,id:job.member.id,w:60,name:job.member.userName}" />
                                </span>
                                <div class="basic">
                                    <div class="pos-name">{{job.title}}</div>
                                    <div class="cpy-name">{{job.companyName}}</div>
                                </div>
                            </div>
                            <div class="job-r">
                                <div class="jo-pro-item">
                                    <span class="addr">工作地点</span>
                                    <span class="pro-value">{{job.province}}</span>
                                </div>
                                <!-- <div class="jo-pro-item">
                                    <span class="addr">工作年限</span>
                                    <span class="pro-value">不限</span>
                                </div> -->
                                <div class="jo-pro-item">
                                    <span class="nature">工作性质</span>
                                    <span class="pro-value">{{job.jobNature}}</span>
                                </div>
                                <div class="jo-pro-item">
                                    <span class="sarlary">预算</span>
                                    <span class="pro-value budget">{{job.salary}}</span>
                                </div>
                            </div>
                        </template>
                    </a>
                    <div class="no-more-text" v-if="!hasMore&&!isloading&&list.length>0">没有更多了</div>
                    <Empty text="没有找到符合条件的结果~" v-if="!isloading&&list.length==0"/>
                </div>
                <div class="right">
                    <div class="publish-box">
                        <div class="text">发布我的职位</div>
                        <a class="btn" @click="handleShowPub">发布特色职位</a>
                    </div>
                    <!-- <div class="publish-box">
                        <div class="text">特色企业</div>
                        <div class="ts-companys">
                            <a class="ts-company-item">
                                <span class="c-img-box"><img loading="lazy" src="" alt=""></span>赤子城科技
                            </a>
                            <a class="ts-company-item">
                                <span class="c-img-box"><img loading="lazy" src="" alt=""></span>赤子城科技
                            </a>
                            <a class="ts-company-item">
                                <span class="c-img-box"><img loading="lazy" src="" alt=""></span>赤子城科技
                            </a>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>

        <!-- <div class="modal-mask publish-job-win-mask" v-if="showPublish"  @click="showPublish=false">

        </div> -->

        <a-modal v-model="showPublish" destroyOnClose centered :footer="null"  :closable="false" width='773px'>
            <form class="publish-job-win" @submit.prevent="()=>{return false;}" >
                <a class="close-modal" @click="showPublish=false"></a>
                <div class="job-form-box">
                    <div class="tit">职位发布<span class="sub-tit">以下发布内容，没有标“非必填”的项，均为必填项</span>
                    </div>
                    <div class="form-field-item">
                        <input type="text" v-model="form.title" placeholder="职位名称（如：游戏UI设计师、游戏ICON设计师、资深游戏UI设计师）">
                    </div>
                    <div class="form-field-item">
                        <input type="text" v-model="form.companyName" placeholder="公司名称">
                    </div>
                    <div class="form-field-item">
                        <input type="text" v-model="form.companyUrl" placeholder="公司官网（非必填）">
                    </div>
                    <div class="form-field-item flex-between-item recruit-cur-bg">
                        <!-- <DropDown placeholder="工作城市" style="width:100%;"/> -->
                            <!-- <el-cascader 
                            v-model="options"
                            clearable
                            placeholder="工作城市" class="pro-work-elcascader mr20"
                            :options="options"
                            @change="handleChange" popper-class="pro-wlrk-elcascader-proper"
                            ></el-cascader> -->

                        <el-cascader
                            style="width: 100%;"
                            size="large" class="pro-work-elcascader"
                            :options="options" popper-class="pro-wlrk-elcascader-proper"
                            v-model="selectedOptions"
                            @change="handleChange"
                            placeholder="工作城市"
                            >
                        </el-cascader>
                        <DropDown :list="jobNatureList" :value.sync="form.jobNature" placeholder="工作性质" style="margin-left:20px;width:100%;"/>
                    </div>
                    <div class="form-field-item flex-between-item recruit-cur-bg">
                        <DropDown :list="jobCompanyNature" :value.sync="form.jobType" placeholder="行业类型" style="width:100%;"/>
                        <DropDown :list="jobSalaryList" :value.sync="form.salary" placeholder="月薪范围" style="margin-left:20px;width:100%;" :maxh="300"/>
                    </div>
                    <div class="form-field-item">
                        <input type="text" v-model="form.companyEmail" placeholder="简历发送至（如：hr@gameui.net）">
                    </div>
                    <div class="form-field-item">
                        <!-- <textarea v-model="form.jobDescription" placeholder="职位描述"></textarea> -->
                        <quillEditor v-model="form.jobDescription" :options="quillEditorOption1"></quillEditor>
                    </div>
                    <div class="form-field-item">
                        <!-- <textarea v-model="form.skillDescription" placeholder="职位要求"></textarea> -->
                        <quillEditor v-model="form.skillDescription" :options="quillEditorOption2"></quillEditor>
                    </div>
                </div>
                <div class="bot-right">
                    <a class="publish" @click="handlePublish">发布职位</a>
                </div>
            </form>
        </a-modal>

        <a-modal v-model="showInfo" destroyOnClose centered :footer="null"  :closable="false" width='1195px' wrapClassName="recruit-info-modal">
            <RecruitInfo :data="info" @close="showInfo=false" @showmeall="onShowMeAll"/>
        </a-modal>
    </div>
</template>

<script>

import Empty from '@/components/Empty'
import { quillEditor } from "vue-quill-editor";
import SparkMD5 from 'spark-md5'
import { regionData,provinceAndCityData, CodeToText,TextToCode } from "element-china-area-data";
import api from '@/api/api'
import DropDown from '@/components/dropdown'
import RecruitInfo from '@/components/RecruitInfo'
export default {
    components:{
        DropDown,RecruitInfo,quillEditor,Empty
    },
    data(){
        return {
            isloading:false,
            selectedOptionsFilter:[],
            quillEditorOption1:{
					 placeholder:'职位描述',
					 modules:{
						toolbar:{
							container:[
								['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
								['blockquote', 'code-block'],                      //引用，代码块
								[{ 'header': 1 }, { 'header': 2 }],               // 几级标题
								[{ 'list': 'ordered'}, { 'list': 'bullet' }],     // 有序列表，无序列表
								[{ 'script': 'sub'}, { 'script': 'super' }],      // 下角标，上角标
								[{ 'indent': '-1'}, { 'indent': '+1' }],          // 缩进
								[{ 'direction': 'rtl' }],                         // 文字输入方向
								[{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
								[{ 'header': [1, 2, 3, 4, 5, 6, false] }],// 标题
								[{ 'color': [] }, { 'background': [] }],          // 颜色选择
								[{ 'font': [] }],// 字体
								[{ 'align': [] }], // 居中
								['clean'],
								 ['link', 'image', 'video']
							]
						}
					 }
				 },
      quillEditorOption2:{
					 placeholder:'职位要求',
					 modules:{
						toolbar:{
							container:[
								['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
								['blockquote', 'code-block'],                      //引用，代码块
								[{ 'header': 1 }, { 'header': 2 }],               // 几级标题
								[{ 'list': 'ordered'}, { 'list': 'bullet' }],     // 有序列表，无序列表
								[{ 'script': 'sub'}, { 'script': 'super' }],      // 下角标，上角标
								[{ 'indent': '-1'}, { 'indent': '+1' }],          // 缩进
								[{ 'direction': 'rtl' }],                         // 文字输入方向
								[{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
								[{ 'header': [1, 2, 3, 4, 5, 6, false] }],// 标题
								[{ 'color': [] }, { 'background': [] }],          // 颜色选择
								[{ 'font': [] }],// 字体
								[{ 'align': [] }], // 居中
								['clean'],
								 ['link', 'image', 'video']
							]
						}
					 }
				 },
            selectedOptions:[],
            scrollLoaded:false,
            hasMore:true,
			options: regionData,
            showInfo:false,
            showPublish:false,
            jobNatureList:[],
            jobSalaryList:[],
            jobCompanyNature:[],
            list:[],
            form:{},
            info:{
                member:{

                }
            },
            params:{
                jobNature:'',
                pageNum:1,
                pageSize:20,
                isAsc:'desc',
                orderByColumn:'createTime'
            }
        }
    },
    watch:{
        'params.jobNature':function(){
            this.params.companyName='';
            this.params.pageNum=1;
            this.list=[];
            this.hasMore=true;
            this.scrollLoaded=false;
            this.queryList();
        },
        'params.salary':function(){
            this.params.companyName='';
            this.params.pageNum=1;
            this.list=[];
            this.hasMore=true;
            this.scrollLoaded=false;
            this.queryList();
        }
    },
    destroyed() {
        $(document).unbind('scroll')
    },
    methods:{
        handleShowPub(){
          let ckPass=this.$bhelper.checkLogin(this);
          if(!ckPass)return;
            this.showPublish=true;
        },
        handleChangeFilter(){
            var loc = "";
            let that = this
            if(this.selectedOptionsFilter.length>0){
                for (let i = 0; i < this.selectedOptionsFilter.length; i++) {
                    loc += CodeToText[this.selectedOptionsFilter[i]];
                    if(i == 0){
                        that.params.province = CodeToText[this.selectedOptionsFilter[i]]
                    }
                    if(i == 1){
                        that.params.city = CodeToText[this.selectedOptionsFilter[i]]
                    }
                    if(i == 2){
                        that.params.area = CodeToText[this.selectedOptionsFilter[i]]
                    }
                }
            }else{
                that.params.province='';
                that.params.city='';
                that.params.area='';
            }
            this.params.companyName='';
            this.params.pageNum=1;
            this.list=[];
            this.hasMore=true;
            this.scrollLoaded=false;
            this.queryList();
        },
        handleSearch(e){
            if(e)e.target.blur();
            this.params.companyName='';
            this.params.pageNum=1;
            this.list=[];
            this.hasMore=true;
            this.scrollLoaded=false;
            this.queryList();
        },
        handleChange() {
            var loc = "";
            let that = this
            for (let i = 0; i < this.selectedOptions.length; i++) {
                loc += CodeToText[this.selectedOptions[i]];
                if(i == 0){
                    that.form.province = CodeToText[this.selectedOptions[i]]
                }
                if(i == 1){
                    that.form.city = CodeToText[this.selectedOptions[i]]
                }
                if(i == 2){
                    that.form.area = CodeToText[this.selectedOptions[i]]
                }
            }
        },
        async handlePublish(){
            let data=Object.assign({},this.form);
            if(!data.title){
                this.$amessage.warn('职位名称不能为空!');
                return
            }
            if(!data.companyName){
                this.$amessage.warn('公司名称不能为空!');
                return
            }
            if(!data.city){
                this.$amessage.warn('请选择工作城市!');
                return
            }
            if(!data.jobNature){
                this.$amessage.warn('请选择工作性质!');
                return
            }
            if(!data.jobType){
                this.$amessage.warn('请选择行业类型!');
                return
            }
            if(!data.salary){
                this.$amessage.warn('请选择月薪范围!');
                return
            }
            if(!data.companyEmail){
                this.$amessage.warn('请填写简历发送目标邮箱!');
                return
            }
            var reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            if(!reg.test(data.companyEmail)){
                this.$amessage.warn("邮箱格式不正确");
                return;
            }
            if(!data.jobDescription){
                this.$amessage.warn('请填写职位描述!');
                return
            }
            if(!data.skillDescription){
                this.$amessage.warn('请填写职位要求!');
                return
            }
            let res=await api.addJob(data);
            if(res.code==0){
                this.showPublish=false;

                this.params.companyName='';
                this.params.pageNum=1;
                this.list=[];
                this.hasMore=true;
                this.scrollLoaded=false;
                this.queryList();
                this.$amessage.success('发布成功')
            }else{
                this.$amessage.error(res.msg);
            }
        },
        clearCurCompanyBy(){
            this.params.companyName='';
            this.params.pageNum=1;
            this.list=[];
            this.hasMore=true;
            this.scrollLoaded=false;
            this.queryList();
        },
        onShowMeAll(_name){
            this.showInfo=false;
            this.params.companyName=_name;
            this.params.pageNum=1;
            this.list=[];
            this.hasMore=true;
            this.scrollLoaded=false;
            this.queryList();
        },
        async handleShowInfo(item){
            if(!item.id)return;
            let res=await api.getJobById(item.id);
            this.info=res.data;
            this.showInfo=true;
        },
        onImgError(e){
            e.target.src=require('../assets/pro/default_uimg.svg');
        },
        get_avatar_url(member={id:'', avatar:''}, n=1, w=30) {
            if (!member.id || !member.avatar) return this.defaultAvatar
            let hash = SparkMD5.hash(member.avatar).slice(0, 6)
            return `https://img.gameui.net/avatar-${member.id}-${hash}@${n}x${w}.webp`
        },
        get_avatar_urls(member={id:'', avatar:''}, w=30) {
            return `${this.get_avatar_url(member, 1, w)} 1x, ${this.get_avatar_url(member, 2, w)} 2x, ${this.get_avatar_url(member, 3, w)} 3x`
        },
        handleLoadingMore(){
            this.params.pageNum++;
            this.queryList();
        },
        async queryList(){
            this.isloading=true;
            if(this.params.pageNum==1){
                this.list=[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}];
            }
            let result=await api.jobList(this.params);
            if(this.params.pageNum==1){
                this.list=[];
            }
            this.isloading=false;
            this.list=[...this.list,...result.data];
            let that=this;
            if(result.data&&(result.data.length<that.params.pageSize||result.data.length==0)){
                that.hasMore=false;
            }else{
                that.hasMore=true;
            }
            that.scrollLoaded=true;
        }
    },
    async mounted(){
        this.options.forEach(f=>{
            if(f.children){
                f.children.forEach(s=>{
                    if(s.label=='市辖区'){
                        f.children=s.children;
                    }
                })
            }
        })
        let res=await api.getJobAttribute({type:'job_nature'});
        res.data.job_nature.map(item=>{
            item.value=item.title.toString();
        })
        res.data.job_salary.map(item=>{
            item.value=item.title.toString();
        })
        res.data.company_nature.map(item=>{
            item.value=item.title.toString();
        })
        this.jobNatureList=res.data.job_nature;
        this.jobSalaryList=res.data.job_salary;
        this.jobCompanyNature=res.data.company_nature;

        this.queryList();
        
        let that=this;
        $(document).on('scroll',function(e){
            let jHeight=document.documentElement.scrollHeight-document.documentElement.scrollTop-document.documentElement.clientHeight;
            
            if(that.scrollLoaded==false)return;
            
            if(jHeight<=200&&that.hasMore){
                that.scrollLoaded=false;
                that.handleLoadingMore();
            }
        })
    }
}
</script>

<style scoped lang="less">
.recruit-page{
    .top{
        display: flex;
        align-items:center;
        justify-content: space-between;
        .left-back{
            background: url('../assets/pro/back_btn_icon.svg') no-repeat;
            width:44px;height:44px;
            display: block;
            transition:.2s all linear;
            &:hover {
                background: url('../assets/pro/gminfo_topback_hover.svg') no-repeat;
                background-size: cover;
            }
        }
        .my-publish{
            line-height:40px;
            background:#1C1C1E;
            color:#fff;
            border-radius:8px;
            text-align: center;
            width:96px;
            font-size:14px;
        }
    }
    .recruit-page-conbox{
        // background: #171717;
        border-radius: 16px;
        margin-top:18px;
        padding:40px;
        .filter{
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .search-bx{
                top:20px;
                width: 100%;
                width: 100%;
                margin-right:20px;
                .cancel-search{
                    background:url('../assets/pro/cancel_search.svg');
                    width:20px;height:20px;
                    position: absolute;
                    top:10px;
                    right:10px;
                }
                form {
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                    height: 40px;
                    background-image: url('../assets/pro/header/search_icon.svg');
                    background-repeat: no-repeat;
                    background-position: 13px center;

                    border-radius:8px;
                    background-color: #242327;
                    padding-left:33px;
                    position: relative;
                    input{
                    height:26px;
                    background-color: #242327;
                    // color:#848393;
                    border: none;
                    padding-left: 15px;
                    color: #fff;
                    width: 100%;
                    font-size: 14px;
                    }
                }
            }
            .other{
                display: flex;
                align-items: center;
                ::v-deep{
                    .pro-work-elcascader{
                        line-height: 40px;
                        input{
                            background:#242327 !important;
                            border-radius:8px;
                            height:40px !important;
                            line-height:40px !important;
                            &::-webkit-input-placeholder{
                                color:#fff !important;
                            }
                        }
                        .el-input__suffix .el-input__suffix-inner .el-icon-arrow-down{
                            color:#b9b9b9 !important;
                        }
                        .is-focus{
                            input{
                                border:1px solid #11CCB1 !important;
                            }
                        }
                    }
                }
            }
        }
        .job-tit{
            margin-top:43px;
            font-size:26px;
            font-weight:500;
            .cur-company{
                position: relative;
                margin-right: 40px;
                font-weight: normal;
                margin-left: 20px;
                background: #23232A;
                font-size: 14px;
                line-height: 39px;
                display: inline-block;
                padding: 0px 40px 0px 15px;
                border-radius: 8px;
                .cancel-search{
                    background:url('../assets/pro/cancel_search.svg');
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    top: 9px;
                    right: 10px;
                    cursor: pointer;
                    opacity: 0.7;
                    &:hover{
                        opacity:1;
                    }
                }
            }
        }
        .layout-box{
            margin-top:12px;
            display: flex;
            .left{
                margin-right:20px;
                width:calc(100% - 340px);
                .job-item{
                    display: flex;
                    margin-bottom:20px;
                    background:#23232A;
                    border-radius:16px;
                    padding:25px 26px;
                    justify-content: space-between;
                    height:110px;
                    // transition:.1s all linear;
                    animation: opacity .2s linear;
                    border:1px solid #23232A;
                    &.no-data{
                        background:#1D1D1F;
                        border-color:#1D1D1F;
                    }
                    &:hover{
                        border:1px solid #11CCB1;
                        .pos-name{
                            color:#11CCB1;
                        }
                    }
                    .job-l{
                        display: flex;
                        align-items: center;
                        .j-img-box{
                            width:60px;height:60px;
                            border-radius:60px;
                            overflow: hidden;
                            margin-right:21px;
                            background:#131313;
                            img{
                                width:100%;
                                height:100%;
                                object-fit: cover;
                            }
                        }
                        .basic{
                            .pos-name{
                                font-size:16px;
                                font-weight:500;
                                line-height:22px;
                            }
                            .cpy-name{
                                font-size:14px;
                                color:#969696;
                                margin-top:14px;
                                line-height:20px;
                            }
                        }
                    }
                    .job-r{
                        display: flex;
                        align-items: center;
                        min-width:363px;
                        .jo-pro-item{
                            margin-right:68px;
                            span{
                                display:block;
                                &:first-child{
                                    color:#969696;
                                    font-size:14px;
                                }
                                &:last-child{
                                    color:#969696;
                                    font-size:16px;
                                    margin-top:16px;
                                    color:#fff;
                                }
                            }
                            .sarlary{
                                background:url('../assets/pro/icon_job_salary.svg') no-repeat;
                                background-position:left center;
                                padding-left:18px;
                                background-size:14px 14px;
                            }
                            .addr{
                                background:url('../assets/pro/icon_job_local.svg') no-repeat;
                                background-position:left center;
                                padding-left:18px;
                                background-size:14px 14px;
                            }
                            .nature{
                                background:url('../assets/pro/icon_job_nature.svg') no-repeat;
                                background-position:left center;
                                padding-left:18px;
                                background-size:14px 14px;
                            }
                            .budget{
                                color:#11CCB1 !important;
                            }
                        }
                    }
                }
            }
            .right{
                width:340px;
                .publish-box{
                    background:#23232A;
                    border-radius:16px;
                    padding:30px 25px 25px 25px;
                    margin-bottom:20px;
                    .text{
                        font-size:20px;
                        font-weight:500;
                        text-align: center;
                    }
                    .btn{
                        line-height:49px;
                        border-radius:8px;
                        background:#11CCB1;
                        color:#fff;
                        text-align: center;
                        width:251px;
                        display: block;
                        font-size:16px;
                        font-weight:500;
                        margin:27px auto 10px auto;
                        user-select: none;
                        transition:.1s all linear;
                        &:hover {
                            background: #0fab94;
                        }
                    }
                    .ts-companys{
                            margin-top:34px;
                        .ts-company-item{
                            margin-bottom:20px;
                            display: flex;
                            align-items: center;
                            font-size:16px;
                            font-weight:500;
                            background:url('../assets/pro/job_arrow.svg') no-repeat;
                            background-position:right center;
                            .c-img-box{
                                width:50px;height:50px;
                                border-radius:50px;
                                overflow: hidden;
                                margin-right:18px;
                                background:#131313;
                            }
                        }
                    }
                }
            }
        }
    }
}
.publish-job-win{
        width:773px;
        border-radius:30px;
        background:#23232A;
        box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.3);
        // position:fixed;
        // left:calc((100% - 773px) / 2);
        // top:20%;
        z-index:112;
        padding:55px 87px 58px 86px;
        position: relative;
        .form-field-item{
            font-size:14px;
            margin-bottom:10px;
            input{
                background:#171719;
                height:40px;
                border-radius:8px;
                border:none;
                padding-left:14px;
                width:100%;
                color:#fff;
            }
            textarea{
                background:#171719;
                height:80px;
                border-radius:8px;
                padding:10px 14px;
                border:none;
                resize:none;
                width:100%;
                color:#fff;
            }

            ::v-deep {
                 .ql-toolbar{   
                    display: none;
                }
                 .ql-container{
                    border:none !important;
                }
                 .ql-editor{
                    border-radius:4px !important;
                    border:1px solid #171719 !important;
                    border-top:1px solid #171719 !important;
                    height:120px;
                    background:#171719;
                }
                 .ql-editor:focus{
                    // border:1px solid red !important;
                }
                 .ql-snow .ql-blank:-webkit-input-placeholder{
                    font-style: normal !important;
                }
            }

            ::v-deep{
                .pro-work-elcascader{
                    line-height: 40px;
                    input{
                        background:#171719;
                        border-radius:8px;
                        height:40px !important;
                        line-height:40px !important;
                        &::-webkit-input-placeholder{
                            color:#fff !important;
                        }
                    }
                    .el-input__suffix .el-input__suffix-inner .el-icon-arrow-down{
                        color:#b9b9b9 !important;
                    }
                    .is-focus{
                        input{
                            border:1px solid #11CCB1 !important;
                        }
                    }
                }
            }
        }
        .flex-between-item{
            display: flex;
            align-items: center;
        }
        .tit{
            font-size:33px;
            font-weight:500;
            margin-bottom:24px;
            color:#fff;
            .sub-tit{
                font-size:12px;
                color:#6A6A80;
                margin-left:24px;
            }
        }
        .bot-right{
            text-align: right
        }
        .publish{
            line-height:51px;
            background:#11CCB1;
            text-align: center;
            border-radius:8px;
            width:259px;
            display:inline-block;
            font-size:16px;
            font-weight:500;
            color:#fff;
            margin-top:13px;
            user-select: none;
            transition:.1s all linear;
            // float:right;
            &:hover {
            background: #0fab94;
            }
        }
        
    .close-modal{
        width:20px;
        height:20px;
        background:url('../assets/pro/close_modal_page.svg') no-repeat;
        background-size:cover;
        position: absolute;
        top:35px;
        z-index:102;
        right:29px;
        transition:.1s all linear;
        &:hover{
            opacity:.8;
            transform: rotate(90deg);
        }
    }
    }






























































</style>